<script setup>
import { formatDateTime } from '@/utils/dayjs'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { cancelGoodSend } from '@/api/goodSend'

const props = defineProps({
  sendInfo: {
    type: Object,
    required: true,
  },
  showCancelFooter: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['cancel', 'success'])

const form = reactive({
  cancelReason: '',
})
const cancelLoading = ref(false)

const handleCancel = () => {
  emit('cancel')
}

const handleSubmitCancel = async () => {
  if (!form.cancelReason.trim()) {
    ElMessage.error('请填写作废理由')
    return
  }
  cancelLoading.value = true
  try {
    const payload = {
      ...props.sendInfo,
      cancelReason: form.cancelReason.trim(),
    }
    const res = await cancelGoodSend(payload)
    if (res.success) {
      ElMessage.success('作废成功')
      emit('success')
    } else {
      ElMessage.error(res.msg || '作废失败')
    }
  } catch {
    ElMessage.error('作废发货单失败')
  } finally {
    cancelLoading.value = false
  }
}
</script>
<template>
  <div class="delivery-note" v-if="sendInfo">
    <h2 class="title">发货单详情</h2>
    <div class="order-info">
      <el-descriptions title="单据信息" :column="3" border>
        <el-descriptions-item label="快递公司">{{
          sendInfo.expressCompanyname || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="快递单号">{{
          sendInfo.trackingNumber || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="发货单号">{{ sendInfo.sendNo }}</el-descriptions-item>
        <el-descriptions-item label="发货时间">{{
          formatDateTime(sendInfo.sendTime)
        }}</el-descriptions-item>
        <el-descriptions-item label="操作员">{{ sendInfo.dealerOperator }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="consignee-info">
      <el-descriptions title="收货信息" :column="2" border>
        <el-descriptions-item label="收货人">{{ sendInfo.consignee }}</el-descriptions-item>
        <el-descriptions-item label="行政区划">{{ sendInfo.xzqhName }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ sendInfo.memberAddress }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ sendInfo.mobilphone }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="goods-list">
      <h3 class="font-bold">商品列表</h3>
      <div class="table-scroll-wrapper">
        <el-table :data="sendInfo.pzOrderSendDList" style="width: 100%" height="100%">
          <el-table-column
            prop="goodsName"
            show-overflow-tooltip
            label="商品名称"
            min-width="180"
          />
          <el-table-column label="商品图片" width="120" align="center">
            <template #default="scope">
              <el-image
                style="width: 80px; height: 80px"
                :src="scope.row.goodsPicture"
                :preview-src-list="[scope.row.goodsPicture]"
                fit="cover"
                preview-teleported
              />
            </template>
          </el-table-column>
          <el-table-column prop="dealerGoodsTypeName" label="商品类型" min-width="120" />
          <el-table-column prop="specifications" label="规格" min-width="100" />
          <el-table-column prop="purchaseQuantity" label="采购数量" min-width="80" />
          <el-table-column prop="unit" label="单位" min-width="80" />
          <el-table-column prop="address" label="商品产地" min-width="150" />
          <el-table-column label="商品有效期" min-width="200">
            <template #default="scope">
              {{ scope.row.periodStartingDate }} - {{ scope.row.periodEndDate }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template v-if="showCancelFooter">
      <el-form :model="form" style="margin-top: 20px">
        <el-form-item label="作废理由" required>
          <el-input
            v-model="form.cancelReason"
            type="textarea"
            :rows="3"
            maxlength="200"
            show-word-limit
            placeholder="请填写作废理由"
          />
        </el-form-item>
      </el-form>
      <div style="text-align: right; margin-top: 10px">
        <el-button @click="handleCancel">
          <template #icon>
            <el-icon><LineMdClose /></el-icon>
          </template>
          取消
        </el-button>
        <el-button type="danger" :loading="cancelLoading" @click="handleSubmitCancel">
          <template #icon>
            <el-icon><LineMdClipboardCheck /></el-icon>
          </template>
          作废</el-button
        >
      </div>
    </template>
  </div>
</template>
<style lang="scss" scoped>
.delivery-note {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  height: 80vh;
  .title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}

.order-info,
.consignee-info {
  margin-top: 20px;
}

.goods-list {
  margin-top: 20px;
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  .font-bold {
    flex-shrink: 0;
  }
  .table-scroll-wrapper {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  .el-table {
    flex: 1 1 0%;
    min-height: 0;
  }
}
</style>
